<template>
	<view class="main-f">
		<view style="width:100%;height:100%;display: flex;">
			<view class="jine_01">
				<view class="jine_01_01">金币余额</view>
				<view class="jine_01_02">
					<image src="../../static/money.png"></image>
					102565545
					<view style="width:200upx;height:100%;border:0px red solid;float: right;right:0;display: flex;justify-content: center;align-items: center;">
						<view style="width:80%;height:50%;border:0px green solid;border-radius:20upx;font-size:25upx;display: flex;justify-content: center;align-items: center;background: #999999;">充值记录</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width:100%;height:100%;display: flex;">
			<view class="jine_02">
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						100
					</view>
					<view class="jine_02_01_02">
						<view>10元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						300
					</view>
					<view class="jine_02_01_02">
						<view>30元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						600
					</view>
					<view class="jine_02_01_02">
						<view>60元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						1500
					</view>
					<view class="jine_02_01_02">
						<view>150元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						2000
					</view>
					<view class="jine_02_01_02">
						<view>200元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						3500
					</view>
					<view class="jine_02_01_02">
						<view>350元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						5000
					</view>
					<view class="jine_02_01_02">
						<view>500元</view>
					</view>
				</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<image src="../../static/money.png"></image>
						10000
					</view>
					<view class="jine_02_01_02">
						<view>1000元</view>
					</view>
				</view>
				<view style="color:#fff;font-size:30upx;height:70upx;line-height:70upx;">自定义金额</view>
				<view class="jine_02_01">
					<view class="jine_02_01_01">
						<input type="text" placeholder="金额不能小于10元" />
					</view>
					<view class="jine_02_01_02">
						<view>充值</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	page{background:#4B004D;}
	.main-f{width:100%;height:100%;}
	.jine_01{
		width:100%;
		height:150upx;
		border:0px yellow solid;
		padding:30upx;
	}
	.jine_01 .jine_01_01,.jine_01_02{
		width:100%;
		border:0px red solid;
	}
	.jine_01 .jine_01_01{
		height:50upx;
		font-size:30upx;
		line-height:50upx;
		color:#fff;
	}
	.jine_01 .jine_01_02{
		height:100upx;
		font-size:50upx;
		color:#FFFF00;
		border-bottom: #FFB903 1upx solid;
	}
	.jine_01 .jine_01_02 image{
		width:100upx;
		height:100upx;
		display:tabel-cell;
		vertical-align:middle;
	}
	.jine_02{
		width:100%;
		height:auto;
		border:0px red solid;
		padding:30upx;
		padding-top: 0;
	}
	.jine_02 .jine_02_01{
		width:100%;
		height:70upx;
		border:0px green solid;
		color: #FFFF00;
		font-size:30upx;
		line-height:70upx;
	}
	.jine_02 .jine_02_01 .jine_02_01_01,.jine_02_01_02{
		height:100%;
		width:50%;
		border:0px blue solid;
		float: left;
		box-sizing: border-box;
	}
	.jine_02 .jine_02_01 .jine_02_01_01 image{
		display:tabel-cell;
		vertical-align:middle;
		width:50upx;
		height:50upx;
	}
	.jine_02 .jine_02_01 .jine_02_01_01{text-align: left;}
	.jine_02 .jine_02_01 .jine_02_01_02{padding:10upx;}
	.jine_02 .jine_02_01 .jine_02_01_02 view{
		width:150upx;
		height:100%;
		float: right;
		right:0;
		border-radius:35upx;
		font-size:30upx;
		color:#fff;
		background:#FF4081;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
